<template>
  <div class="tabbar">
    <template v-for="(item, index) in tabbarData" :key="index">
      <div 
       class="tabbar-item"
       :class="{ active: currentIndex === index }"
       @click="itemClick(index, item)"
       >
      <img v-if="currentIndex !== index" :src="getAssetURL(item.image)"/>
      <img v-else :src="getAssetURL(item.imageActive)"/>
      <span class="text">{{item.text}}</span>
      </div>
    </template>
  </div>
</template>

<script setup>
import { getAssetURL } from '../../utils/load_assets'
import { ref } from 'vue'
import { useRouter } from "vue-router"
  const tabbarData = [
    {
      text:"首页",
      image: "tabbar/tab_home.png",
      imageActive: "tabbar/tab_home_active.png",
      path: "/home"
    },
    {
      text:"收藏",
      image: "tabbar/tab_favor.png",
      imageActive: "tabbar/tab_favor_active.png",
      path: "/favor"
    },
    {
      text:"订单",
      image: "tabbar/tab_order.png",
      imageActive: "tabbar/tab_order_active.png",
      path: "/order"
    },
    {
      text:"信息",
      image: "tabbar/tab_message.png",
      imageActive: "tabbar/tab_home_active.png",
      path: "/message"
    },

  ]
  const currentIndex = ref(0);
  const router = useRouter()
  function itemClick(index, item){
    currentIndex.value = index
    router.push(item.path)
  }
</script>

<style lang="less" scoped>
.tabbar{
  display: flex;
  position: fixed;
  height: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #fff;
  background-color: #fff;
  .tabbar-item{
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    &.active {
      color: var(--primary-color);
    }
    .text {
      margin-top: 2px;
      font-size: 12px;
    }
    img {
      width: 36px;
    }
  }
}
</style>
